$(window).load( function() {
	counter = [];
	counterTotal = 0;
	var backgroundWidth = 960; /*Default width dari gambar backgorund*/
	var ratio = 1; /*Ratio Image Kelihatan (1:(1+ratio))*/
	var animationTime = 750; /*Waktu animasi dalam milisecond*/
	
	function retrieveAllAnimatedElements(elem)
	{
		var animatedElements = elem.children();
		var cumulativeHeight = 0;
		var defaultHeight = 0;
		
		for(i=0;i<animatedElements.length;i++)
		{
			var elementClass = animatedElements[i].getAttribute("class");
			if(elementClass=="background")
			{
				defaultHeight = animatedElements[i].clientHeight;
				break;
			}
		}
		
		for(i=0;i<animatedElements.length;i++)
		{
			var elementClass = animatedElements[i].getAttribute("class");
			var elementStyle = animatedElements[i].getAttribute("style");
			var newElementStyle = "";
			var elementCurrentHeight = 0;
			var elementCurrentWidth = 0;
			
			if(elementStyle!=null)
			{
				var strStyle = elementStyle.split(";");
				var elementAnimatedFrom = "";
				for(iter=0;iter<strStyle.length;iter++)
				{
					var strTmp = strStyle[iter].split(": ");
					if(strTmp[0].indexOf("animatedfrom") != -1) elementAnimatedFrom = strTmp[1];
				}
			}
			
			if(elementClass=="background")
			{
				//Jika kelas background, left bernilai 0px dan background selalu ada di belakang, maka dari itu z-index:-1
				elementCurrentHeight = animatedElements[i].clientHeight;
				newElementStyle = elementStyle + "left:0px" + "top:" + -(cumulativeHeight) + "px; z-index:-1;";
			}
			else
			{
				newElementStyle = "height:" + defaultHeight + "px; width: auto;";
				animatedElements[i].setAttribute("style", newElementStyle);
				elementCurrentHeight = animatedElements[i].clientHeight;
				elementCurrentWidth = animatedElements[i].clientWidth;
				
				//Jika tidak kelas background maka left digeser di kiri background atau di kanan background sesuai dia diset ternaimasi dari mana
				if(elementAnimatedFrom=="left")
					newElementStyle += (elementStyle==null ? "":elementStyle) + "left:" + -(elementCurrentWidth) + "px;";
				else
					newElementStyle += (elementStyle==null ? "":elementStyle) + "left:" + backgroundWidth + "px;";
				newElementStyle += "top:" + -(cumulativeHeight) + "px;";
			}
			//Mengeset properti css sesuai dengan perhitungan di atas, dibedakan apakah background atau tidak
			animatedElements[i].setAttribute("style", newElementStyle);
			//Tiap image disusun secara block, makanya properti css top diset sesuai jumlah height dari semua image yang ada di atasnya
			$(animatedElements[i]).css("display", "block");
			//Properti dari position diset relatif sehingga tiap gambar yang teranimasi posisinya mengikuti div animasi
			$(animatedElements[i]).css("position", "relative");
			cumulativeHeight += elementCurrentHeight;
		}
	}
	
	function animateOnSeen(elem, index)
	{
		upBound = $(window).scrollTop();
		bottomBound = $(window).height() + $(window).scrollTop();
		imgPos = $(elem).offset().top;
	
		if(ratio*(bottomBound-imgPos) > imgPos-upBound)
		{
			var animatedElements = elem.children();
			var cumulativeWidth = 0;
			
			for(i=0;i<animatedElements.length;i++)
			{
				if(animatedElements[i].getAttribute("class")=="background") 
					continue;
				$(animatedElements[i]).animate({left:cumulativeWidth}, animationTime);
				cumulativeWidth += animatedElements[i].clientWidth;
			}
			counter[index] = 1;
			counterTotal++;
		}
	}
	
	animationClass = $('.animasi').toArray();
	for(j=0;j<animationClass.length;j++)
	{
		//properti max-height tiap div dengan kelas animasi diset sesuai height background agar tidak terlalu panjang
		var thisChildren = animationClass[j].childNodes;
		var maxheight;
		for(k=0;k<thisChildren.length;k++)
		{
			if(thisChildren[k].tagName=="IMG")
				if(thisChildren[k].getAttribute("class")=="background")
					maxheight = thisChildren[k].clientHeight;
		}
		$(animationClass[j]).css("max-height",maxheight+"px");
		//properti overflow tiap div diset hidden agar gambar yang teranimasi dari kiri / kanan tidak terlihat
		$(animationClass[j]).css("overflow","hidden");
		
		//counter untuk tiap bagian animasi
		counter.push(0);
		//mengatur properti tiap elemen yang teranimasi pada tiap div
		retrieveAllAnimatedElements($(animationClass[j]));
		//menghandle jika animasi langsung terlihat 
		animateOnSeen($(animationClass[j]), j);
	}

	window.addEventListener('scroll', 
							function()
							{
								for(j=0;j<animationClass.length;j++)
								{
									if(counter[j]==0)
									{
										animateOnSeen($(animationClass[j]), j);
									}
									if(counterTotal > animationClass.length - 1)
									{
										window.removeEventListener('scroll',arguments.callee,false);
									}
								}
							},
							false);
});